<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类选择器</title>
    <style>
        a:link{
            color: red;
            font-size: 30px;
        }
        a:hover{
            color: black;
            font-size: 20px;
        }
        a:visited{
            color: aqua;
            font-size: 30px;
        }
        a:active{
            color: greenyellow;
            font-size: 30px;
        }
        a:first-child{
            color: yellow;
            font-size: 24px;
        }
/*        a:last-child:visited{
            color: purple;
            font-size: 24px;
        }*/
        a:last-of-type{
            color: red;
            font-size: 50px;
        }
    </style>
</head>
<body>
    <!--
        :link 表示尚未被访问的元素
        :visited 表示已访问的元素
        :hover ，指鼠标悬停的状态
        :active ，指激活的状态

        结构伪类
        :first-child  同一个父元素下第一个子元素
        :last-child   同一个父元素下最后一个子元素
        :last-of-type 同一个父元素下最后一个子元素
    -->
    <div>
        <a href="#">劳大</a>
        <br>
        <a href="http://www.taobao.com">淘宝</a>
        <br>
        <a href="#">劳小</a>
    </div>
</body>
</html>